:root {
	--blue: #409efd;
	--light-blue: #e8f3ff;
	--color-white: #fff;
	--text-color: #666666;
	--text-color-dark: #333333;
	--text-color-gray: #ccc;
	--text-color-gray1: #999999;
	--text-color-gray2: #666666;
	--text-color-success: #00c64b;
	--text-color-warning: #fe8442;
	--text-color-btn1: #01b9c0;
	--bg-gray: #eff0f2;
	--bg-white: #fff;
	--radius-sm: 3px;
	--radius-base: 5px;
	--radius-lg: 10px;
	--border-color: #e8eaec;
}

// dialog 底部按钮样式
.bottom_btn {
	display: flex;
	justify-content: flex-end;
}

// 通用列表样式
.system_box {
	width: 100%;
	height: 100%;
	box-sizing: border-box;
	padding: 14px;

	.system_content {
		width: 100%;
		height: 100%;
		background: white;
		border-radius: 10px;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;

		header {
			width: 100%;
			border-bottom: 1px solid var(--border-color);
			padding: 0 20px;
			display: flex;
			align-items: center;
			box-sizing: border-box;
			height: 50px;
			flex-shrink: 0;

			.system_tabs {
				display: flex;
				align-items: center;
				height: 100%;
				flex: 1;
				overflow-x: auto;

				span {
					margin-right: 16px;
					display: flex;
					align-items: center;
					height: 100%;
					position: relative;
					cursor: pointer;

					&.active {
						color: var(--blue);

						&::after {
							content: "";
							position: absolute;
							bottom: 0;
							min-width: 50px;
							width: 100%;
							height: 3px;
							background: var(--blue);
							left: 50%;
							transform: translateX(-50%);
						}
					}

					&:hover {
						color: var(--blue);
					}
				}
			}
		}

		.system_table {
			flex: 1;
			margin: 10px;
			display: flex;
			flex-direction: column;

			.system_page {
				margin-top: 10px;
				display: flex;
				justify-content: flex-end;
			}
		}
	}
}
